<!DOCTYPE html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Table - Rainbow</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../static/libs/vue/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/rainbow-nash@0.1.17/dist/rainbow-nash.css">
    <script src="https://unpkg.com/rainbow-nash@0.1.17/dist/rainbow-nash.umd.min.js"></script>
    <link rel="stylesheet" href="../static/libs/highlight/highlight@9.12.0.min.css">
    <link rel="stylesheet" href="../static/libs/highlight/vs.min.css">
    <script src="../static/libs/highlight/highlight@9.12.0.min.js"></script>
    <style>
      [v-cloak] {
        display: none;
      }
      .demo-header{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
      .code-font{
        font-family: Consolas,Menlo,Courier,monospace;
      }
      .demo-header h1{
        margin-right: auto;
        font-family: Consolas,Menlo,Courier,monospace;
        font-size: 42px;
      }
      .demo-header h1 span{
        font-size: 60px;
        transform: rotate(7deg);
      }
      pre code{
        font-family: Consolas,Menlo,Courier,monospace;
        line-height: 2;
      }
      pre textarea{
        display: none;
      }
      .hljs{
        background-color: #f7f7f7;
      }
      .hljs-name, .hljs-keyword{
        color: #6089ec;
        font-weight: normal;
      }
      
      .anchor{
        margin-top: 30px;
      }
      .anchor h2, .anchor h3{
        margin-bottom: 10px;
      }
      
      .margin-top-10{
        margin-top: 10px;
      }
      
      .api table{
        font-family: Consolas,Menlo,Courier,monospace;
      }
      .api table th{
        white-space: nowrap;
      }
      
      
    </style>
  </head>
  <body>
    <r-app id="app" v-cloak>
      <div slot="header" align-items="center" class="demo-header">
        <h1 style="color: #f4615c"> <span>R</span><i>ainbow.Doc</i></h1>
        <r-icon type="paper-airplane"></r-icon>
        <r-dropdown label="木已成鲨鱼" style="margin-left: 4px">
          <r-dropdown-item>个人信息</r-dropdown-item>
          <r-dropdown-item>登出</r-dropdown-item>
        </r-dropdown>
      </div>
      <r-menu slot="aside" mode="vertical" v-model="common.activeMenu" expand>
        <r-menu-item name="1" href="start.html">快速上手</r-menu-item>
        <r-sub-menu name="2">
          <template slot="title">Basic</template>
          <r-menu-item name="2-1" href="grid.html">
            <r-icon type="ios-grid-view-outline"></r-icon>Grid 栅格
          </r-menu-item>
          <r-menu-item name="2-2" href="app.html">
            <r-icon type="ios-browsers-outline"></r-icon>App 布局
          </r-menu-item>
          <r-menu-item name="2-3" href="button.html">
            <r-icon type="social-youtube-outline"></r-icon>Button 按钮
          </r-menu-item>
          <r-menu-item name="2-4" href="icon.html">
            <r-icon type="ios-heart-outline"></r-icon>Icon 图标
          </r-menu-item>
        </r-sub-menu>
        <r-sub-menu name="3">
          <template slot="title">Form</template>
          <r-menu-item name="3-1" href="input.html">
            <r-icon type="ios-compose-outline"></r-icon>Input 输入框
          </r-menu-item>
          <r-menu-item name="3-2" href="radio.html">
            <r-icon type="ios-circle-filled"></r-icon>Radio 单选框
          </r-menu-item>
          <r-menu-item name="3-3" href="checkbox.html">
            <r-icon type="android-checkbox-outline"></r-icon>Checkbox 多选框
          </r-menu-item>
          <r-menu-item name="3-4" href="table.html">
            <r-icon type="ios-grid-view"></r-icon>Table 表格
          </r-menu-item>
          <r-menu-item name="3-5" href="select.html">
            <r-icon type="ios-arrow-down"></r-icon>Select 选择器
          </r-menu-item>
          <r-menu-item name="3-6" href="datepicker.html">
            <r-icon type="ios-calendar-outline"></r-icon>DatePicker 日期选择器
          </r-menu-item>
          <r-menu-item name="3-7" href="timepicker.html">
            <r-icon type="ios-clock-outline"></r-icon>TimePicker 时间选择器
          </r-menu-item>
          <r-menu-item name="3-8" href="upload.html">
            <r-icon type="ios-cloud-upload-outline"></r-icon>Upload 上传
          </r-menu-item>
          <r-menu-item name="3-9" href="form.html">
            <r-icon type="ios-list-outline"></r-icon>Form 表单
          </r-menu-item>
        </r-sub-menu>
        <r-sub-menu name="4">
          <template slot="title">View</template>
          <r-menu-item name="4-1" href="card.html">
            <r-icon type="ios-browsers-outline"></r-icon>Card 卡片
          </r-menu-item>
          <r-menu-item name="4-2" href="message.html">
            <r-icon type="ios-information-outline"></r-icon>Message 全局提示
          </r-menu-item>
          <r-menu-item name="4-3" href="modal.html">
            <r-icon type="ios-chatbubble-outline"></r-icon>Modal 对话框
          </r-menu-item>
          <r-menu-item name="4-4" href="progress.html">
            <r-icon type="android-remove"></r-icon>Progress 进度条
          </r-menu-item>
          <r-menu-item name="4-5" href="timeline.html">
            <r-icon type="android-more-vertical"></r-icon>Timeline 时间轴
          </r-menu-item>
          <r-menu-item name="4-6" href="tag.html">
            <r-icon type="ios-pricetags-outline"></r-icon>Tag 标签
          </r-menu-item>
          <r-menu-item name="4-7" href="tooltip.html">
            <r-icon type="chatbox-working"></r-icon>Tooltip 文字提示
          </r-menu-item>
          <r-menu-item name="4-8" href="tree.html">
            <r-icon type="network"></r-icon>Tree 树形控件
          </r-menu-item>
          <r-menu-item name="4-9" href="breadcrumb.html">
            <r-icon type="aperture"></r-icon>Breadcrumb 面包屑
          </r-menu-item>
          <r-menu-item name="4-10" href="alert.html">
            <r-icon type="android-alert"></r-icon>Alert 警告
          </r-menu-item>
        </r-sub-menu>
        <r-sub-menu name="5">
          <template slot="title">Navigation</template>
          <r-menu-item name="5-1" href="menu.html">
            <r-icon type="navicon-round"></r-icon>Menu 导航菜单
          </r-menu-item>
          <r-menu-item name="5-2" href="tabs.html">
            <r-icon type="social-windows-outline"></r-icon>Tabs 标签页
          </r-menu-item>
          <r-menu-item name="5-3" href="dropdown.html">
            <r-icon type="arrow-down-b"></r-icon>Dropdown 下拉菜单
          </r-menu-item>
          <r-menu-item name="5-4" href="page.html">
            <r-icon type="ios-book-outline"></r-icon>Page 分页
          </r-menu-item>
        </r-sub-menu>
      </r-menu>
      <div slot="main">
        <h1>Table 表格</h1>
        <div class="anchor">
          <h2 id="概述"></h2>
        </div>
        <r-card>
          <r-tabs v-model="common.tab">
            <r-tab-pane name="1" label="示例">
              <r-table :data="data1" ref="table" :border="false" :show-header="true" :sort-method="sort" :sort-field="sortField" :sort-dir="sortDir" :loading="loading" @row-click="rowClick" show-summary>
                <r-table-column width="50" type="expand" align="center">
                  <template slot-scope="scope">
                    <div>{{scope.data.name}}</div>
                  </template>
                </r-table-column>
                <r-table-column width="50" type="checkbox"></r-table-column>
                <r-table-column width="50" type="index"></r-table-column>
                <r-table-column title="姓名" field="name" width="80" :ellipsis="true">
                  <template slot-scope="scope">
                    <r-tooltip><span>{{scope.data.name}}</span>
                      <div slot="content">{{scope.data.name}}</div>
                    </r-tooltip>
                  </template>
                </r-table-column>
                <r-table-column title="数学" field="math" align="right" :sortable="true" v-if="test"></r-table-column>
                <r-table-column title="语文" field="chinese.value" align="right" :sortable="true"></r-table-column>
                <r-table-column title="操作" align="center" width="140" v-if="test">
                  <template slot-scope="scope">
                    <r-button type="primary" size="small" @click.native="_alert(scope.data.id, $event)" v-if="test">查看</r-button>
                  </template>
                </r-table-column>
              </r-table>
            </r-tab-pane>
            <r-tab-pane name="2" label="代码">
              <pre><code class="html"></code>
                <textarea v-pre><r-table 
  :data="data1" ref="table" :border="false" :show-header="true" :sort-method="sort" 
  :sort-field="sortField" :sort-dir="sortDir" :loading="loading" @row-click="rowClick" show-summary
>
  <r-table-column width="50" type="expand" align="center">
    <template slot-scope="scope">
      <div>{{scope.data.name}}</div>
    </template>
  </r-table-column>
  <r-table-column width="50" type="checkbox"></r-table-column>
  <r-table-column width="50" type="index"></r-table-column>
  <r-table-column title="姓名" field="name" width="80" :ellipsis="true">
    <template slot-scope="scope">
      <r-tooltip>
        <span>{{scope.data.name}}</span>
        <div slot="content">{{scope.data.name}}</div>
      </r-tooltip>
    </template>
  </r-table-column>
  <r-table-column title="数学" field="math" align="right" :sortable="true" v-if="test"></r-table-column>
  <r-table-column title="语文" field="chinese.value" align="right" :sortable="true"></r-table-column>
  <r-table-column title="操作" align="center" width="140" v-if="test">
    <template slot-scope="scope">
      <r-button type="primary" size="small" @click.native="_alert(scope.data.id, $event)" v-if="test">查看</r-button>
    </template>
  </r-table-column>
</r-table>

<script>
var data1 = []
for (var i=0; i<10; i++){
  data1.push({
    id: i,
    name: '张三测试测试测试测试' + i,
    math: i * 10,
    chinese: {
      value: i* 10 + 5
    },
  })
}
exprot default {
  data () {
    return {
      data1 : data1,
      test: true,
      sortField: 'math',
      sortDir: 'asc',
      loading: false,
    }
  },
  methods: {
    _alert (id, e) {
      e.stopPropagation()
      this.$alert(id)
    },
    sort (dir, field) {
      var me = this
      me.loading = true

      setTimeout(function (){
        me.data.sort((a, b)=>{
          var x = a[field] - b[field]

          if (dir === 'asc'){
            return x
          }
          else {
            return -x
          }
        })

        me.sortField = field
        me.sortDir = dir

        me.loading = false
      }, 1000)
      
    },
    rowClick (data, e) {
      this.$message('点击了' + data.id)
    }
  }
}
</script>

                </textarea></pre>
            </r-tab-pane>
          </r-tabs>
        </r-card>
        <div class="anchor">
          <h2>Api</h2>
        </div>
        <div class="anchor">
          <h3>Table props</h3>
        </div>
        <div class="r-table r-table-border api">
          <table>
            <thead>
              <tr>
                <th>
                  <div>属性</div>
                </th>
                <th>
                  <div>说明</div>
                </th>
                <th>
                  <div>类型</div>
                </th>
                <th>
                  <div>默认值</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div>data</div>
                </td>
                <td>
                  <div>显示的结构化数据</div>
                </td>
                <td>
                  <div>Array</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>border</div>
                </td>
                <td>
                  <div>是否显示纵向边框</div>
                </td>
                <td>
                  <div>Boolean</div>
                </td>
                <td>
                  <div>false</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>width</div>
                </td>
                <td>
                  <div>表格宽度</div>
                </td>
                <td>
                  <div>Number | String</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>no-data-text</div>
                </td>
                <td>
                  <div>数据为空时显示的提示内容</div>
                </td>
                <td>
                  <div>String</div>
                </td>
                <td>
                  <div>暂无数据</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>sort-method</div>
                </td>
                <td>
                  <div>排序方法 ，接受两个参数type, field，type值为asc，desc</div>
                </td>
                <td>
                  <div>Function</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>sort-field</div>
                </td>
                <td>
                  <div>当前的排序字段</div>
                </td>
                <td>
                  <div>String</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>sort-dir</div>
                </td>
                <td>
                  <div>当前的排序顺序，可选值asc, desc</div>
                </td>
                <td>
                  <div>String</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>loading</div>
                </td>
                <td>
                  <div>数据加载时候，显示的loading效果</div>
                </td>
                <td>
                  <div>Boolean</div>
                </td>
                <td>
                  <div>false</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>show-summary</div>
                </td>
                <td>
                  <div>是否在表尾显示合计行</div>
                </td>
                <td>
                  <div>Boolean</div>
                </td>
                <td>
                  <div>false</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>summary-text</div>
                </td>
                <td>
                  <div>合计行第一列的文本</div>
                </td>
                <td>
                  <div>String</div>
                </td>
                <td>
                  <div>合计</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>summary-method</div>
                </td>
                <td>
                  <div>自定义的合计计算方法</div>
                </td>
                <td>
                  <div>Function</div>
                </td>
                <td>
                  <div> </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="anchor">
          <h3>Table events</h3>
        </div>
        <div class="r-table r-table-border api">
          <table>
            <thead>
              <tr>
                <th>
                  <div>事件名</div>
                </th>
                <th>
                  <div>说明</div>
                </th>
                <th>
                  <div>返回值</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div>on-check-all-change</div>
                </td>
                <td>
                  <div>全选点击时候触发</div>
                </td>
                <td>
                  <div>选中状态 true || false</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>on-check-change</div>
                </td>
                <td>
                  <div>单行 checkbox 或者 radio 点击时候触发</div>
                </td>
                <td>
                  <div>当前行的 data</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>on-row-click</div>
                </td>
                <td>
                  <div>单击某一行时触发</div>
                </td>
                <td>
                  <div>当前行数据</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="anchor">
          <h3>Table methods</h3>
        </div>
        <div class="r-table r-table-border api">
          <table>
            <thead>
              <tr>
                <th>
                  <div>方法名</div>
                </th>
                <th>
                  <div>说明</div>
                </th>
                <th>
                  <div>参数</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div>getCheckeds</div>
                </td>
                <td>
                  <div>获取被选中的数据</div>
                </td>
                <td> 
                  <div>field | 无，当传入filed，则返回field字段的数组</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="anchor">
          <h3>TableColumn props</h3>
        </div>
        <div class="r-table r-table-border api">
          <table>
            <thead>
              <tr>
                <th>
                  <div>属性</div>
                </th>
                <th>
                  <div>说明</div>
                </th>
                <th>
                  <div>类型</div>
                </th>
                <th>
                  <div>默认值</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div>title</div>
                </td>
                <td>
                  <div>列标题</div>
                </td>
                <td>
                  <div>Sring</div>
                </td>
                <td>
                  <div>#</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>field</div>
                </td>
                <td>
                  <div>列字段名</div>
                </td>
                <td>
                  <div>Sring</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>type</div>
                </td>
                <td>
                  <div>列类型，可选值有 index、checkbox、radio、expand 或者不设置</div>
                </td>
                <td>
                  <div>Sring</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>width</div>
                </td>
                <td>
                  <div>列宽度</div>
                </td>
                <td>
                  <div>Number | Sring</div>
                </td>
                <td>
                  <div>-</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>align</div>
                </td>
                <td>
                  <div>对齐方式，可选值 left、right、center</div>
                </td>
                <td>
                  <div>Sring</div>
                </td>
                <td>
                  <div>left</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>sortable</div>
                </td>
                <td>
                  <div>此列是否支持排序</div>
                </td>
                <td>
                  <div>Boolean</div>
                </td>
                <td>
                  <div>false</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>ellipsis</div>
                </td>
                <td>
                  <div>开启后，文本将不换行，超出部分显示省略号。需要同时设置width属性</div>
                </td>
                <td>
                  <div>Sring</div>
                </td>
                <td>
                  <div>false</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </r-app>
    <script>
      var data1 = []
      for (var i=0; i<10; i++){
        data1.push({
          id: i,
          name: '张三测试测试测试测试' + i,
          math: i * 10,
          chinese: {
            value: i* 10 + 5
          },
        })
      }
      
      new Vue({
        el: '#app',
        watch: {
          'common.componentValue' () {
            location.href = this.common.componentValue + '.html'
          }
        },
        data () {
          return {
            common: {
              componentValue: '',
              activeMenu: '3-4',
              tab: '',
            },
      
            data1 : data1,
            test: true,
            sortField: 'math',
            sortDir: 'asc',
            loading: false,
          }
        },
        methods: {
          _alert (id, e) {
            e.stopPropagation()
            this.$alert(id)
          },
          sort (dir, field) {
            var me = this
            me.loading = true
      
            setTimeout(function (){
              me.data1.sort(function (a, b){
                var x = a[field] - b[field]
      
                if (dir === 'asc'){
                  return x
                }
                else {
                  return -x
                }
              })
      
              me.sortField = field
              me.sortDir = dir
      
              me.loading = false
            }, 1000)
            
          },
          rowClick (data, e) {
            this.$message('点击了' + data.id)
          }
        }
      })
    </script>
  </body>
</html>
<script>
  setTimeout(function (){
    var preNodes = document.getElementsByTagName('pre')
    for (var i=0, preNode, codeNode, textNode; i<preNodes.length; i++){
      preNode = preNodes[i]
      codeNode = preNode.querySelector('code')
      textNode = preNode.querySelector('textarea')
  
      codeNode.innerText = textNode.value.trim()
      hljs.highlightBlock(codeNode)
    }
  }, 100)
</script>